<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-06-18 09:22:10
 * @LastEditors: zhangxiangsheng 1026583651@qq.com
 * @LastEditTime: 2024-06-19 18:38:56
 * @FilePath: \appGly\pages\Station\components\StationItem.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <view
    class="stationitemcontent"
    @click="$z.gopage(`/pages/Station/Stationxq?id=${item.id}`)"
  >
    <view class="u-flex title">
      <view class="iconfont iconquyu sbicon"></view>
      <view class="u-line-1">{{ item.pcs }}</view>
      <view style="width: 8rpx"></view>
      <u-tag
        size="mini"
        shape="circle"
        type="primary"
        :text="$z.$t(`使用率${item['syl']}%`)"
      ></u-tag>
    </view>
    <view class="zsb">
      {{
        $z.$t(`总设备数${item.ChargeCarPcs.zx + item.ChargeCarPcs.lx || "0"}`)
      }}
      <text class="dl" v-if="item.b_zf">{{ $z.$t("独立") }}</text>
    </view>
    <view class="mui-ellipsis">
      <text class="zxChargeCar">
        {{ $z.$t(`${item["ChargeCarPcs"].zx}在线`) }}
      </text>
      <text class="shu">|</text>
      <text class="lxChargeCar">
        {{ $z.$t(`${item["ChargeCarPcs"].lx}离线`) }}
      </text>
      <text class="shu">|</text>
      <text class="kxChargeCar">
        {{ $z.$t(`${item["ChargeCarPcs"].kx}空闲`) }}
      </text>
      <text class="shu">|</text>
      <text class="cdzChargeCar">
        {{ $z.$t(`${item["ChargeCarPcs"].cd}充电中`) }}
      </text>
    </view>
    <view class="rightIcon">
      <u-icon name="arrow-right" size="24" color="#969696"></u-icon>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      item: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    data() {
      return {};
    },
  };
</script>

<style lang="scss" scoped>
  .stationitemcontent {
    background: #fff;
    padding: 22rpx 30rpx;
    position: relative;
    .rightIcon {
      position: absolute;
      right: 20rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    .title {
      font-size: 34rpx;
      .iconfont {
        width: 60rpx;
        height: 60rpx;
        font-size: 40rpx;
        margin-right: 12rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .zsb {
      font-size: 24rpx;
      line-height: 50rpx;
      color: #8f8f94;
      .dl {
        margin-left: 10px;
        color: #92ceff;
      }
    }
  }

  .zxChargeCar {
    font-size: 14px;
    color: #92ceff;
    margin-right: 5px;
  }

  .lxChargeCar {
    font-size: 14px;
    color: #969696;
    margin: 0 5px;
  }

  .cdzChargeCar {
    font-size: 14px;
    color: #ffa1a7;
    margin: 0 5px;
  }

  .kxChargeCar {
    font-size: 14px;
    color: #9affad;
    margin: 0 5px;
  }

  .shu {
    font-size: 16px;
    color: #aaaaaa;
    /*vertical-align: top;*/
    height: 14px;
    /* display: inline-block; */
  }
</style>
